<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="68px">
			<el-form-item label="反馈功能" prop="feedbackMk">
				<el-input v-model="queryParams.feedbackMk" placeholder="反馈功能" clearable />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">

		</el-row>

		<el-table v-loading="loading" :data="userList">
			<el-table-column show-overflow-tooltip label="昵称" align="center" prop="nickName">
			</el-table-column>
			<el-table-column label="头像" align="center" prop="createTime">
				<template slot-scope="scope">
					<el-image style="width: 40px; height: 40px" :src="scope.row.headimgurl"
						:preview-src-list="scope.row.imgs">
					</el-image>
				</template>
			</el-table-column>
			<el-table-column show-overflow-tooltip label="反馈功能" align="center" prop="feedbackMk" />
			<el-table-column show-overflow-tooltip label="反馈内容" align="center" prop="content" />
			<el-table-column show-overflow-tooltip label="反馈时间" align="center" prop="creationTime" />
			<!-- <el-table-column show-overflow-tooltip width="100" label="学历" align="center" prop="background" /> -->
			<el-table-column width="200" fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button size="mini" type="success" style="padding: 10px 10px;"
						@click="handleDetail(scope.row)">详情</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />

		<el-dialog title="详情" :visible.sync="DetailVisible" width="70%" :close-on-click-modal="false">
			<el-descriptions class="margin-top" title="详情信息" :column="3" border>
				<el-descriptions-item>
					<template slot="label">
						昵称
					</template>
					{{userDetail.nickName}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						头像
					</template>
					<el-image style="width: 40px; height: 40px" :src="userDetail.headimgurl"
						:preview-src-list="userDetail.imgs">
					</el-image>
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						反馈功能
					</template>
					{{userDetail.feedbackMk}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						反馈内容
					</template>
					{{userDetail.content}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						反馈照片
					</template>
					<el-image v-for="(item,index) in userDetail.urlList" style="width: 60px; height: 60px"
						:src="item" :preview-src-list="userDetail.urlList">
					</el-image>
				</el-descriptions-item>
			</el-descriptions>
		</el-dialog>


	</div>
</template>

<script>
	import {
		listfkApi,
	} from "@/api/all/userApi";
	export default {
		name: "Documentary",
		data() {
			return {
				// 遮罩层
				loading: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 是否显示弹出层
				open: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					feedbackMk: ''
				},
				dialogVisible: false,
				userList: [], //存取后端获取客户列表
				DetailVisible: false,
				userDetail: {}
			};
		},
		created() {
			this.getList();
			console.log(this.$store.state.user.nickName, 'nickName');
		},
		methods: {
			// 详情
			handleDetail(e) {
				console.log(e);
				this.userDetail = e
				this.DetailVisible = true
			},

			/** 查询跟单详情列表 */
			getList() {
				this.loading = true;
				listfkApi(this.queryParams).then(response => {
					console.log(response, 'response');
					response.rows.forEach(it => {
						it.imgs = []
						it.imgs.push(it.headimgurl)
					})
					this.userList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				// this.resetForm("queryForm");
				this.queryParams = {
						pageNum: 1,
						pageSize: 10,
						feedbackMk: ''
					},
					this.handleQuery();
			},
		}
	};
</script>
<style>
	.el-tooltip__popper {

		max-width: 800px;

	}

	::v-deep .el-upload-list__item .is-success.focusing .el-icon-close-tip {
		display: none !important;
	}

	.el-upload--picture-card {
		width: 100%;
		height: 100%;
	}

	.el-upload {
		display: block;
	}

	.el-upload-dragger {
		width: 100%;
		height: 100%;
	}
</style>